<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="utf-8"> 
	<title>ImageDatas get & put</title> 
	<style>
		canvas{ position:absolute; }
		p{ position:absolute; bottom:0px; }
	</style>
	<script src="../../lib/jquery/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script> 
	<script> 
		$( function(){
			
			var img = new Image();
			
			img.onload = function(){
			
				var w = h = 10;
				n = w * h; //100			
				var inter = 200;
				t = 48;
				
				var ct = $("#ct");
				var ctx = $("<canvas>").attr({
					width: t * w,
					height: t * h
				}).css("zIndex", 1).appendTo(ct)[0].getContext("2d");
				
				ctx.drawImage(img, 0, 0, img.width, img.height);
				var data = ctx.getImageData(0, 0, t, t);
				
				
				setInterval(function(){
				
					for (var i = 0; i < n; i++) {
						var x = (i % w) * t, y = parseInt(i / w) * t;
	
						ctx.getImageData(x, y, t, t);
						ctx.putImageData(data, x, y, t, t);
					}
					
					
					
				}, inter);
			}

			img.src = "footman.png";
		} );
		
			
	</script> 
</head> 
<body id="canvasdemo"> 
	<div id="ct">
		
	</div>
	<p>
		n = 10, i =20, cpu = 3% <br/>
		n = 20, i =20, cpu = 40% <br/>
		n = 10, i =20, w=h=48, cpu = 48% <br/>
		n = 10, i =200, w=h=48, cpu = 10% <br/>
	</p>	
</body> 
<script></script>
</html>